<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link href="/static/css/font.css?v={{data.version}}" rel="stylesheet">
  <link href="/static/css/weadmin.css?v={{data.version}}" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js?v={{data.version}}"></script>
</head>

<body>

<div class="weadmin-body" style="padding: 10px;">
	<table class="layui-hide" id="video" lay-filter="tableFilter"></table>
</div>

<button style="display: none;" id="video_copys" class="bt_copy" data-clipboard-text=""></button>

<script src="/static/lib/layui/layui.js?v={{data.version}}"></script>
<script src="/static/js/eleDel.js" type="text/javascript"></script>
<script type="text/javascript">
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}
pid=getUrlParam('id');
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
	var laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  ,layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,carousel = layui.carousel //轮播
	  ,upload = layui.upload //上传
	  ,element = layui.element //元素操作
	  ,slider = layui.slider //滑块
    ,$ = layui.jquery
  //执行一个 table 实例
  table.render({
    elem: '#video'
    ,height: 220
    ,url: '/video_node_api/index?id='+pid //数据接口
    ,title: '列表'
    ,page: false //开启分页
    ,toolbar: 'toolbarTpl' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: false //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'pid', title: 'PID', width:100}
      ,{field: 'node_id', title: '节点', width: 350, sort: true}
      ,{field: 'addtime', title: '添加时间', width: 165, sort: true}
      ,{fixed: 'right', width: 240, align:'center', toolbar: '#toolBar'}
    ]]
  });

  table.on("toolbar(tableFilter)", function (obj) {
    let data = obj.data;
    switch (obj.event) {
      case "add":
        apiAdd();
        break;
    }
  });

  table.on("tool(tableFilter)", function (obj) {
    let data = obj.data;
    console.log(obj.event);
    switch (obj.event) {
      case "del":
        apiDel(data.id);break;
      case 'edit':
        apiEdit(data.id);break;
      case 'detail_open':
        apiPlayerOpen(data);break;
      case 'addr':
        apiAddr(data);break;
    }
  });


  function apiDel(id){
    $.post('/video_node_api/del',{id:id},function(data){
        data = $.parseJSON(data);
        layer.msg(data.msg);
        setTimeout(function(){
            location.reload();
        },2000);
    });
  }

  function apiPlayerOpen(data){
    $.getJSON('/video_node_api/getAddr',{id:data.id},function(data){
      copyText(data['data']['url']);
      window.open('/video/player?url='+data['data']['url']);
    });
  }


  function copyText(content){
      var clipboard = new ClipboardJS('#video_copys');
      clipboard.on('success', function (e) {
          layer.msg('复制成功',{icon:1,time:2000});
      });

      clipboard.on('error', function (e) {
          layer.msg('复制失败，浏览器不兼容!',{icon:2,time:2000});
      });
      $("#video_copys").attr('data-clipboard-text',content);
      $("#video_copys").click();
  }

  function apiAddr(data){
    $.getJSON('/video_node_api/getAddr',{id:data.id},function(data){
      copyText(data['data']['url']);
    });
  }

///
});

</script>


<script type="text/html" id="toolbarTpl">
</script>

<script type="text/html" id="toolBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail_open">打开</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="addr">地址复制</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>

</html>